<template>
    <div class="collection">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">我的收藏
        </div>
        <!--<ul class="horizontal-list clear collection_menu">
          <li :class="{active:check_menu == 0}" @click="checkMenu(0)">商品</li>
          <li :class="{active:check_menu == 1}" @click="checkMenu(1)">店铺</li>
        </ul>-->
        <ul class="goods_list vertical-list" v-if="check_menu == 0">
            <li v-for="collection in collections">
                <router-link :to="{path:'/detail',query:{productId:collection.productId}}">
                    <img :src="imageDomain+collection.image" alt="">
                    <div class="goods_info">
                        <p class="goods_title">{{collection.productName}}</p>
                    </div>
                </router-link>
                <p class="goods_b"><span class="price">￥{{collection.price}}</span>
                    <router-link :to="{path:'/shop',query:{shopId:collection.shopId}}">
                        <span class="go_shop">进入店铺</span>
                    </router-link>
                </p>
            </li>
        </ul>
        <ul class="shop_list vertical-list" v-if="check_menu == 1">
            <li>
                <div class="shop_header">
                    <img src="../../assets/img/goods/shop_icon.png" alt="">
                    <div class="shop_info">
                        <p class="mb5">孩子王儿童电动摩托车旗舰店</p>
                        <p><img src="../../assets/img/shop/shop_star.png" alt=""></p>
                    </div>
                    <div class="new_goods">
                        <p class="mb5">5</p>
                        <p>新品上架</p>
                    </div>
                </div>
                <ul class="shop_images horizontal-list clear">
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                </ul>
                <div class="more_goods">更多商品></div>
            </li>
            <li>
                <div class="shop_header">
                    <img src="../../assets/img/goods/shop_icon.png" alt="">
                    <div class="shop_info">
                        <p class="mb5">孩子王儿童电动摩托车旗舰店</p>
                        <p><img src="../../assets/img/shop/shop_star.png" alt=""></p>
                    </div>
                    <div class="new_goods">
                        <p class="mb5">5</p>
                        <p>新品上架</p>
                    </div>
                </div>
                <ul class="shop_images horizontal-list clear">
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                </ul>
                <div class="more_goods">更多商品></div>
            </li>
            <li>
                <div class="shop_header">
                    <img src="../../assets/img/goods/shop_icon.png" alt="">
                    <div class="shop_info">
                        <p class="mb5">孩子王儿童电动摩托车旗舰店</p>
                        <p><img src="../../assets/img/shop/shop_star.png" alt=""></p>
                    </div>
                    <div class="new_goods">
                        <p class="mb5">5</p>
                        <p>新品上架</p>
                    </div>
                </div>
                <ul class="shop_images horizontal-list clear">
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                    <li><img src="../../assets/img/goods.png" alt=""></li>
                </ul>
                <div class="more_goods">更多商品></div>
            </li>
        </ul>
    </div>
</template>

<style>
    @import url("./collection.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'

    export default {
        data() {
            return {
                collections: {},
                check_menu: 0,
                imageDomain: API.imageDomain,
            }
        },
        created() {
             window.scrollTo(0,0);
            let token = localStorage.getItem('token');
            if (token) {
                let url = API.serviceDomain + API.collectionList;
                this.$http({method: "get", url: url}).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.collections = res.body.data;
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            }
        },
        mounted() {
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            checkMenu(type) {
                this.check_menu = type;
            }
        }
    }
</script>
